//图片加载器
(function (React, ReactDOM,ReactRouter,Reflux,$) {
    //定义全局变量
    var BANNER_NUM = 2;
    var ITEM_NUM = 33;
    //存储网站数据
    var DATABASE = null;
    //获取更新数据的DOM
    var processDOM = $('#app .loader-text span');
    //第二步定义路由
    var Router = ReactRouter.Router;
    var Route = ReactRouter.Route;
    var IndexRoute = ReactRouter.IndexRoute;
    var hashHistory = ReactRouter.hashHistory;
    var Link = ReactRouter.Link;
    var Redirect = ReactRouter.Redirect;

    // console.log(Reflux);
    //第一步定义分类页面消息
    var TypeAction = Reflux.createActions(['changeType']);
    //第二步 定义分类页面store
    var TypeStore = Reflux.createStore({
        //监听消息
        listenables:[TypeAction],
        //定义消息监听函数
        onChangeType:function (msg) {
            //根据msg过滤database中的数据，传递给组件，更新视图
            var result = [];
            DATABASE.forEach(function (obj, index) {
                //判断obj的type类型是否是msg
                if(obj.type === msg){
                    result.push(obj);
                }
            })
            //更新组件
            this.trigger(result);
            // console.log(123, arguments);
            //一会使用this。trigger更新状态数据
            // this.trigger(msg);
        }
    })
    //1 创建消息
    var SearchAction  = Reflux.createActions(['changeSearch']);
    //2 创建store
    var SearchStore = Reflux.createStore({
        //监听消息
        listenables:[SearchAction],
        //定义消息监听函数 注册消息
        onChangeSearch:function (query) {
            // console.log(query);
            //根query过滤database中的数据，传递给组件，更新视图
            var result = [];
            DATABASE.forEach(function (obj, index) {
                //判断obj的每一个字段是否包含query
                for(var i in obj){
                    //obj[i] 表示属性值
                    if(obj[i].indexOf(query) >=0){
                        result.push(obj)
                        //到这，已经将任务执行完毕
                        //停止遍历，并返回
                        return;
                    }
                }
            })
            //更新组件
            this.trigger(result);
        }
        
    })

    //渲染首页列表的方法可能被复用，我们使用混合
    var RenderMethod = {
        //获取随机背景图片的方法
        getBackgroundImageUrl:function () {
            var num = parseInt(Math.random()*ITEM_NUM);
            return 'url(img/item/item' + num + '.jpg)';
        },

        //创建列表的方法
        createList:function () {
            // console.log(this.state.data);
            return this.state.data.map(function (obj, index) {
                var style ={
                    backgroundImage:this.getBackgroundImageUrl()
                };
                return(
                    <li key={index} style={style}>
                        <a href={obj.site} target="_blank">
                            <div className="content">
                                <h2>{obj.name}</h2>
                            </div>
                            <div className="layer">
                                <p>{'公司：'+obj.company}</p>
                                <p>{'类型'+obj.type}</p>
                                <p>{'描述'+obj.description}</p>
                            </div>
                        </a>
                    </li>
                )
            }.bind(this))
        },
    };

    //定义Home组件
    var Home = React.createClass({
        //初始化状态数据
        getInitialState:function () {
          return{
              data : DATABASE
          }
        },
        //使用混合
        mixins:[RenderMethod],
        //渲染
        render:function () {
            return(
               <section className="page">
                   <div className="container">
                       <ul>{this.createList()}</ul>
                   </div>
               </section>
            )
        }
    })
    //定义分类组件
    var Type = React.createClass({
        //第三步 绑定状态数据
        mixins:[Reflux.connect(TypeStore,'data'),RenderMethod],
        //初始化状态数据
        getInitialState:function () {
            return{
                data : []
            }
        },
        render:function () {
            console.log('type',this.state);
            return(
                <section className="page">
                    <div className="container">
                        <ul>{this.createList()}</ul>
                    </div>
                </section>
            )
        }
    })
    //定义搜索组件
    var Search = React.createClass({
        //3 绑定消息
        mixins:[Reflux.connect(SearchStore,'data'),RenderMethod],
        //初始化状态
        getInitialState:function () {
          return{
              data: []
          }
        },
        render:function () {
            return(
                <section className="page">
                    <div className="container">
                        <ul>{this.createList()}</ul>
                    </div>
                </section>
            )
        }
    })
    //定义Header组件
    var Header = React.createClass({
        //第二种跳转方式
        goHome:function () {
            hashHistory.replace('/');
        },
        //定义搜索时事件
        goToSearch:function (e) {
          //判断按键
            if(e.keyCode === 13) {
                //如果是回车键，跳转
                hashHistory.replace('/search/'+e.target.value);
                //清空内容
                e.target.value = '';
                //非约束性组件使用ref
                //约束性组件修改状态
            }
        },

        render:function () {
            return(
                <div className="app-header">
                    <header>
                        <div className="container">
                            <input className="pull-right" onKeyDown={this.goToSearch}/>
                            {/*<a href="/">*/}
                                {/*<img src="img/logo.png" alt="" className="logo pull-left"/>*/}
                            {/*</a>*/}
                            <img src="img/logo.png" alt="" className="logo pull-left" onClick={this.goHome}/>
                            <ul className="nav nav-pills nav-justified">
                                <li>
                                    <a href="#/type/movie">视频</a>
                                </li>
                                <li>
                                    <a href="#/type/games">游戏</a>
                                </li>
                                <li>
                                    <a href="#/type/news">新闻</a>
                                </li>
                                <li>
                                    <a href="#/type/sports">体育</a>
                                </li>
                                <li>
                                    <a href="#/type/buy">购物</a>
                                </li>
                                <li>
                                    <a href="#/type/friends">社交</a>
                                </li>
                            </ul>
                        </div>
                    </header>
                    <div className="banner banner-2"></div>
                </div>
            )
        }
    })
    //定义应用程序组件
    var App = React.createClass({
        //定义触发消息的方法
        sendAction:function () {
            //根据pathname做判断
            var pathname = this.props.location.pathname;
            //如果是type页面
            if(pathname.indexOf('/type/') === 0){
                //第四步 触发消息
                TypeAction.changeType(this.props.params.id);
            }else{
                // 发送search 消息
                //第四步 触发消息
                SearchAction.changeSearch(this.props.params.id);
            }
        },
        //创建器发送
        componentDidMount:function () {
          this.sendAction();
        },
        //存在期发送
        componentDidUpdate:function () {
            this.sendAction();
        },
        render:function () {
            // this.sendAction();
            return(
                <div>
                    <Header></Header>
                    {/*第一步  第一组件容器
                    这里是组件页面渲染的容器，各个页面渲染在这里*/}
                    {this.props.children}
                </div>
            )
        }
    })
    // 第二步 定义路由
    // console.log(ReactRouter)

    //定义路由规则
    var routes = (
        <Router>
            <Route path="/" component={App}>
                {/*定义子路由组件*/}
                <IndexRoute component={Home}></IndexRoute>
                <Route path="type/:id" component={Type}></Route>
                <Route path="search/:id" component={Search}></Route>
            </Route>
        </Router>
    )
    //第三步 渲染 图片加载完成渲染













    /*
    *  创建图片加载器
    *  @params 图片配置对象
    *   @step 每加载完成一张图片执行的回调函数
    *   @success  加载完成执行的回调函数
    *   @fail  图片加载失败时候的回调函数
    *
    * */
    var ImageLoader = function (params,step,success,fail) {
        // 缓存图片数量
        this.bannerNum = params.bannerNum || 0;
        this.itemNum = params.itemNum || 0;
        this.step = step || function () {};
        this.success = success || function () {};
        this.fail = fail || function () {};
        //初始化应用
        this.init();
    }
    //定义原型方法
    ImageLoader.prototype={
        //初始化方法init
        init:function () {
            //计算总数
            this.total = this.bannerNum + this.itemNum;
            this.bannerTotal = this.bannerNum;
            this.itemTotal = this.itemNum;
            //加载这些图片
            this.loader();
        },
        //加载图片的方法
        loader:function () {
            // console.log(222)
            //加载banner图片,图片id可以是0
            while(--this.bannerNum>=0){
                this.loaderImage(this.bannerNum,true);
            }
            //加载item图片
            while(--this.itemNum>=0){
                this.loaderImage(this.itemNum);
            }
            //当值是-1的时候开始加，所以当值是-1的时候还要加回来
            this.bannerNum++;
            this.itemNum++;
        },
        //根据id，生成banner图片的原始地址
        getBannerUrl:function (num) {
            return 'img/banner/banner'+num+'.jpg';
        },
        //根据id，生成item图片的原始地址
        getItemUrl:function (num) {
            return 'img/item/item'+num+'.jpg';
        },
        /*
        * 加载单张图片的方法
        * @num 图片的id
        * @isBanner 是否是banner图片
        *
        * */
        loaderImage:function (num, isBanner) {
            //拼凑地址
            if(isBanner){
                var url  =this.getBannerUrl(num);
            }else {
                var url = this.getItemUrl(num);
            }
            //加载图片
            var img = new Image();
            //图片加载成功时候的回调函数
            img.onload=function () {
                this.updateNum(isBanner);
                //执行step方法
                //当前加载完成的数目，总数目
                this.step(this.bannerNum+this.itemNum,this.total);
                //当全部加载完成之后要执行success
                this.done();
            }.bind(this);
            //监听加载失败
            img.onerror = function () {
                this.updateNum(isBanner);
                this.fail(this.bannerNum+this.itemNum,this.total);
                //当全部加载完成之后要执行success
                this.done();
            }.bind(this);
            //加载图片
            img.src = url;
        },
        //执行成功时候的回调函数
        done:function () {
            if(this.bannerNum+this.itemNum === this.total) {
                this.success(this.total);
            }
        },
        //加载图片，更新num
        updateNum:function (isBanner) {
            //如果是banner图片。加bannerNum
            if(isBanner){
                this.bannerNum++;
            }else{
                this.itemNum++;
            }
        }
    }

    //异步请求加载数据
    $.get('data/sites.json',function (res) {
        // console.log(res);
        // 请求成功保存数据
        if(res && res.errno ===0){
            DATABASE = res.data;
            //加载图片
            new ImageLoader({
                bannerNum:BANNER_NUM,
                itemNum:ITEM_NUM
            },function (num, total) {
                //每加载一张图片更新内容*100% 保留两位小数
                processDOM.html((num/total*100).toFixed(2))
            },function () {
                //成功时候，将元素删除
                processDOM.html('100.00');
                // setTimeout(function () {
                    ReactDOM.render(routes,document.getElementById('app'));
                // },1000)
            },function (num, total) {
                console.log("fail",num,total)
            })
        }
    })


})(window.React, window.ReactDOM,window.ReactRouter,window.Reflux,window.jQuery)